<template>
    <el-container class="layout-container-demo" style="height: 100%;width: 100%;">
        <Aside :collapse = "collapse"></Aside>
        <el-container>
            <el-header style=" font-size: 12px; width: 100%;">

                <Head  @collapse = "collapse"></Head>
            </el-header>

            <el-main>
                <div class="admin-info">
                    <div class="info_left">
                        <img
                            src="https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif?imageView2/1/w/80/h/80"
                            alt="">
                            <div class="img_right" style="
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            margin-left: 10px;">
                                <div>你好，{{username}}！</div>
                                <div>  &nbsp;   </div>
                                <div style=" color: rgb(168,171,178) ;font-size: small;">欢迎来到简易教学信息管理系统</div>
                            </div>
                    </div>
                    <div class="info_right">
                    </div>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>
  
<script>

import Aside from './components/Aside.vue'
import Head from './components/Head.vue';

export default {
  data() {
    return {
      username:"admin",
      age:"-1",
      phone:"-1",
      profession:"-1",
    };
  },
  mounted(){
    this.getUserInfo();
  },
  methods: {
    collapse(data) {
      this.collapse = data;
    },
    //获取一下localstorage中的用户名
    getUserInfo(){
        const userInfo = JSON.parse(localStorage.getItem("userInfo"));
        const name = userInfo.name;
        this.username = name;
    }
  },
  components: {
    Aside,
    Head,
  },
};

</script>
  
<style scoped>
.layout-container-demo .el-header {
    position: relative;
    /* background-color: var(--el-color-primary-light-7); */
    color: var(--el-text-color-primary);
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}


.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
    /* margin-top: 20px; */
    margin: 20px;

    .admin-info {
        width: 100%;
        background-color: white;
        height: 100px;
        display: flex;
        justify-content: space-between;
        /* padding: 0 10px; */
        .info_left{
            margin-left: 10px;
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            /* justify-content: space-between; */
            img{
            width: 15%;
            /* height: 80%; */
            border-radius: 50%;
            /* height: 15px; */
        }
        }
    }
}
</style>